<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./icon/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="./alibaba/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./alibaba/fonts/font.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./less/css/details.css" />
    <title>Document</title>
    <script src="./vue/js/vue.js"></script>
    <script src="./axios/axios.js"></script>
</head>
<body>
    <div id="root">
        <div id="details_box1">
            <div class="box1_cotent col-xs-12">
                <div class="col-xs-2 content_box1" @click="td">
                    <span class="icon iconfont icon-back text-center"></span>
                </div>
                <div class="col-xs-2 col-xs-push-6 content_box2">
                    <span class="icon iconfont icon-fenxiang text-center"></span>
                </div>
                <div class="content_box3 col-xs-2 col-xs-offset-6">
                    <span class="icon iconfont icon-xiaoxi text-center"></span>
                </div>
            </div>
        </div>
        <div id="details_box2">
            <div class="details_box2_img">
                <img src="images/bg/bg_01_3x.png">
            </div>
            <div class="box2_content">
                <div class="deatils_content_box1">
                    <div class="content_box1_content_top col-xs-6">
                        <div>深圳大厦4S店</div>
                    </div>
                    <div class="content_box1_content_bottom col-xs-6">
                        <span class="icon iconfont icon-ditu-dibiao"></span>
                        <span class="gl">3.2公里</span>
                    </div>
                </div>
                <div class="deatils_content_box2">
                    <div class="content_box2_content_top col-xs-9">
                        <div>深圳市宝安区黄务街道千库大厦23号</div>
                    </div>
                    <div class="content_box2_content_bottom col-xs-3">
                        <div class="details_box2_bottom_content text-center">
                            <span class="span1 icon iconfont icon-tianjia"></span>
                            <span class="span2">关注</span> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="details_box3" class="container">
            <b class="col-xs-10">视频看车</b>
            <span class="col-xs-2 icon iconfont icon-fangxiang-you"></span>
        </div>
        <div id="details_box4">
            <div class="details_box4_content">
                <div class="box4_content">
                    <img src="images/t1_3x.png" />
                    <div class="box4_content_content">
                        <span>588ku T800</span>
                        <div>2019款 2.0T 自动</div>
                    </div>
                    <span class="details_box4_span icon iconfont icon-zanting"></span>
                </div>
                <div class="box4_content">
                    <img src="images/t1_3x.png" />
                    <div class="box4_content_content">
                        <span>588ku T800</span>
                        <div>2019款 2.0T 自动</div>
                    </div>
                    <span class="details_box4_span icon iconfont icon-zanting"></span>
                </div>
                <div class="box4_content">
                    <img src="images/t1_3x.png" />
                    <div class="box4_content_content">
                        <span>588ku T800</span>
                        <div>2019款 2.0T 自动</div>
                    </div>
                    <span class="details_box4_span icon iconfont icon-zanting"></span>
                </div>
                <div class="box4_content">
                    <img src="images/t1_3x.png" />
                    <div class="box4_content_content">
                        <span>588ku T800</span>
                        <div>2019款 2.0T 自动</div>
                    </div>
                    <span class="details_box4_span icon iconfont icon-zanting"></span>
                </div>
            </div>
        </div>
        <div id="details_box5">
            <div class="container">
                <div class="col-xs-4">
                    <b>热销车型</b>   
                </div>
            </div>
        </div>
        <div id="details_box6" class="container">
            <div class="details_box6_content" v-for="item,index in carArrays" :key="item.puuid" @click="backToCarDetails(item.puid)">
                <img :src="item.thumb_img">
                <p><b style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{item.title.split(' ')[0]+item.title.split(' ')[1]}}</b></p>
                <span class="details_box6_content_span1">
                    {{
                        typeof(item.title.split(' ')[2]) == "undefined" ? "" : 
                        typeof(item.title.split(' ')[3]) == "undefined" ? item.title.split(' ')[2] :
                        typeof(item.title.split(' ')[4]) == "undefined" ? (item.title.split(' ')[2]+ item.title.split(' ')[3]) :
                        (item.title.split(' ')[2] + item.title.split(' ')[3] + item.title.split(' ')[4])
                    }}
                </span>
                <span class="details_box6_content_span2">
                    <i>￥</i>
                    <span class="gzfont" v-html="item.carCNY"></span>
                </span>
            </div>
        </div>
        <div id="details_box7">
            联系店家
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#root",
            data(){
                return{
                    carArrays:[]
                }
            },
            methods:{
                td(){
                    if (window.frames.length != parent.frames.length) {
                        console.log('有父级页面');
                        window.history.back()
                    }else{
                        console.log('无父级页面')
                        window.location.href='./index.html'
                    }
                },
                backToCarDetails(puuid){
                    // window.location.href='./carDateaisl.html'
                    console.log('puid:',puuid)
                    window.location.href=`./carDateaisl.html?puuid=${puuid}&jsonid=0-0`
                }
            },
            mounted(){
                axios.get('./json/data/0-0.json').then(response=>{
                    console.log(response.data['data']['postList'])
                    this.carArrays = response.data['data']['postList'].map(function(item){
                        // console.log(item)
                        return{
                            clue_id:item.clue_id,
                            puid:item.puid,
                            thumb_img:item.thumb_img,
                            title:item.title,
                            carCount:4.08,
                            carCNY:item.price,
                            first_pay:item.first_pay,
                            rmb_price:JSON.parse(item.service_tracking_info)['price'],
                            license_date:item.license_date
                        }
                    })
                    // console.log(this.carArrays)
                    
                })
            }
        })
    </script>
</body>
</html>